<template>
  <div class="main">
    <el-card>
      <div class="top">
        <span class="topText"
          >距离考试结束还有：<span class="time">{{ countdown }}</span></span
        >

        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="submit()"
          class="submit"
          :disabled="subDisabled"
          >交卷</el-button
        >
      </div>
    </el-card>
    <div class="content">
      <el-card class="sideBar">
        <p class="leftTitle">答题卡</p>
        <el-tag type="warning">未作答</el-tag>
        <el-tag type="success">已作答</el-tag>
        <p v-if="titleList.quType == 1" class="leftTitle">单选题</p>
        <p v-if="titleList.quType == 2" class="leftTitle">多选题</p>
        <p v-if="titleList.quType == 3" class="leftTitle">判断题</p>
        <div class="btns">
          <el-button
            class="opBtn"
            v-for="(item, index) in totleList"
            :key="index + 'a'"
            :type="item.answered ? 'success' : 'warning'"
            @click="titleIndex(item, index)"
          >
            {{ index + 1 }}
          </el-button>
        </div>

        <!-- <p class="leftTitle">多选题</p>
        <el-button  @click="titleIndex(item)">
            {{item}}
        </el-button>
        <p class="leftTitle">判断题</p>
        <el-button >
            {{item}}
        </el-button> -->
      </el-card>

      <el-card class="contentBar">
        <div>
          <p>{{ optIndex + 1 }}.{{ titleList.content }}</p>
          <div
            v-for="(item, index) in answerList"
            :class="[item.checked || item.id == id ? 'action' : 'option']"
            @click="option($event, item)"
            :key="index + 'a'"
            ref="optionBtn"
          >
            {{ item.abc }}:{{ item.content }}

            <!-- <div v-if="item.checked" style="border: 1px solid #409eff" id="borDiv">
              <p>{{ item.abc }}:{{ item.content }}</p>
            </div>
            <div v-else style="border: 1px solid #eee" id="borDiv">
              <p>{{ item.abc }}:{{ item.content }}</p> 
            </div> -->
            <!-- <div v-if="item.checked" class="action">
              <p>{{ item.abc }}:{{ item.content }}</p>
            </div>
            <div v-else class="option">
              <p>{{ item.abc }}:{{ item.content }}</p> 
            </div> -->
          </div>
        </div>

        <el-button
          :disabled="optIndex == 0"
          type="primary"
          icon="el-icon-arrow-left"
          @click="upper()"
          >上一题</el-button
        >
        <el-button :disabled="disabled" type="warning" @click="lower()"
          >下一题<i class="el-icon-arrow-right el-icon--right"></i
        ></el-button>
        <el-button
          type="warning"
          icon="el-icon-question"
          @click="feedback"
          class="submit"
          >反馈题目</el-button
        >
      </el-card>
    </div>

    <el-dialog
      title="反馈"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="题目描述">
          <el-select v-model="form.type" placeholder="请选择题目描述">
            <el-option label="题目描述错误" value="1"></el-option>
            <el-option label="答案不正确" value="2"></el-option>
            <el-option label="题目类型错误" value="3"></el-option>
            <el-option label="其他" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  examcreatePaper,
  exampaperDetail,
  examcheckProcess,
  examquDetail,
  examPaddingAnswer,
  examhandExam,
  examfeedbacksave,
} from "@/api/table";
import cache from '@/plugins/cache';

export default {
  data() {
    return {
      form: {
        type:null,
        content:null,
        memberId:cache.session.getJSON('userId'),
        paperId:null,
        quId:null,
      },
      disabled: false,
      countdown: "",
      time: null,
      // 题目列表
      optIndex: 0,
      totleList: [],
      titleList: {},
      // 当前选择的选项
      mowOption: null,
      id: null,
      clear: null,
      timeout: "",
      show: true,
      subObj: {},
      subDisabled: true,
      timeOut: null,
      answerList: [],
      paperId: null,
      dialogVisible: false,
    };
  },
  mounted() {
    this.getTime();
    this.getCreatePaper();
  },
  clearBorder() {
    let dom = document.querySelector("#borDiv").parentNode();
  },
  beforeDestroy() {
    //清除定时器
    clearTimeout(this.timeOut);
    clearTimeout(this.timeout);
  },
  methods: {
    save(){
      this.form.paperId = this.totleList[this.optIndex].paperId
      this.form.quId = this.totleList[this.optIndex].quId
      examfeedbacksave(this.form).then(res=>{
        this.dialogVisible = false;
      })
    },
    handleClose() {
      this.dialogVisible = false;
    },
    feedback() {
      this.dialogVisible = true;
    },
    submine() {
      return new Promise((resolve, reject) => {
        examPaddingAnswer({
          answers: [this.subObj.id],
          paperId: this.subObj.paperId,
          quId: this.subObj.quId,
        }).then((res) => {
          this.subObj = {};
          if (res.msg == "success") {
            this.examdetailss();
            resolve(res.msg);
          } else {
            reject(res.msg);
          }
        });
      });
    },
    // 下一题
    lower() {
      this.submine();

      this.optIndex++;
      if (this.optIndex >= this.totleList.length - 1) {
        this.getexamquDetail();
        this.disabled = true;
        return;
      }
      this.getexamquDetail();
    },

    // 上一题
    upper() {
      this.submine();
      this.optIndex--;
      (this.disabled = false), this.getexamquDetail();

      // this.setColor()
    },
    getexamquDetail() {
      examquDetail({
        paperId: this.totleList[this.optIndex].paperId,
        quId: this.totleList[this.optIndex].quId,
      }).then((res) => {
        this.titleList = { ...res.data };

        this.answerList = res.data.answerList;
      });
    },
    //
    getTime() {
      this.timeOut = setTimeout(() => {
        this.subDisabled = false;
      }, 1000);
    },
    // 倒计时
    countdowns() {
      var minute = Math.floor(this.time / 60);
      var second = this.time % 60;
      if (second < 10) {
        second = "0" + second;

        this.countdown = minute + ":" + second;
      } else {
        this.countdown = minute + ":" + second;
      }
      this.time = this.time - 1;

      if (this.countdown == "0:00" || this.countdown == "00:00") {
        this.start();
      } else {
        this.timeout = setTimeout(this.countdowns, 1000);
      }
    },
    // 创建试题
    getCreatePaper() {
      examcreatePaper({
        examId: this.$route.params.id,
        memberId: cache.session.getJSON('userId'),
      }).then((res) => {
        if (res.success) {
          this.paperId = res.data;
          this.examdetail();
        } else {
          this.$confirm(res.msg, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.goks(this.$route.params.id);
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      });
    },
    examdetail() {
      exampaperDetail({ id: this.paperId }).then((it) => {
        this.totleList = [
          ...it.data.radioList,
          ...it.data.multiList,
          ...it.data.judgeList,
        ];
        this.time = it.data.totalTime * 60;
        this.countdowns();
        this.getexamquDetail();
      });
    },
    examdetailss() {
      exampaperDetail({ id: this.paperId }).then((it) => {
        this.totleList = [
          ...it.data.radioList,
          ...it.data.multiList,
          ...it.data.judgeList,
        ];

        this.getexamquDetail();
      });
    },
    goks(e) {
      examcheckProcess({ memberId: cache.session.getJSON('userId') }).then(
        (res) => {
          this.paperId = res.data.id;
          this.examdetail();
        }
      );
    },
    titleIndex(item, idx) {
      this.submine();
      examquDetail({
        paperId: item.paperId,
        quId: item.quId,
      }).then((res) => {
        this.titleList = { ...res.data };

        this.answerList = res.data.answerList;
        this.optIndex = idx;

        if (idx + 1 == this.totleList.length) {
          this.disabled = true;
        } else {
          this.disabled = false;
        }
      });
    },
    // 选择选项eidx
    option($event, idx) {
      console.log(this.optIndex);
      $event.stopPropagation();
      this.id = idx.id;
      // idx.checked = false
      this.subObj = { ...idx };

      this.$refs.optionBtn.forEach((item) => {
        item.setAttribute("class", "option");
      });
      if (this.optIndex == this.totleList.length - 1) {
        this.submine();
      }

      $event.target.setAttribute("class", "action");
    },

    start() {
      this.submine();
      examhandExam({
        id: this.titleList.paperId,
        memberId: cache.session.getJSON('userId'),
      }).then((res) => {
        if (res.msg == "success") {
          this.$message({
            type: "success",
            message: "提交成功",
          });
          this.clear = clearTimeout(this.countdowns);
          this.$router.replace(
            `/examManage/${this.$route.params.id}/result/${this.titleList.paperId}`
            // "/out"
          );
        } else {  
          this.$message({
            type: "warning",
            message: "网络异常",
          });
        }
      });
    },
    // 试卷提交
    submit() {
      this.$confirm("交完试卷，无法更改，确定要提交吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.submine().then(async (o) => {
            if (o == "success") {
              let res = await examhandExam({
                id: this.titleList.paperId,
                memberId: cache.session.getJSON('userId'),
              });
              if (res.msg == "success") {
                this.$message({
                  type: "success",
                  message: "提交成功",
                });
                this.$router.replace(
                  `/examManage/${this.$route.params.id}/result/${this.titleList.paperId}`
                  // "/out"
                );
              } else {
                this.$message({
                  type: "warning",
                  message: "网络异常",
                });
              }
            }
          });
          // setTimeout(async() => {

          // }, 5000);
        })
        .catch(() => {});
      //提交后转到结果页
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  padding: 20px;
  .top {
    // display: flex;
    // justify-content: space-between;
    .topText {
      line-height: 100%;
      float: left;
      .time {
        font-weight: 700;
        color: red;
      }
    }
  }
  .submit {
    height: 38px;
    float: right;
    margin: -5px 0 10px 0;
  }
  .content {
    display: flex;
    padding-top: 10px;
    .sideBar {
      width: 30%;
      margin-right: 20px;
      padding: 12px;
      .btns {
        padding: 5px;
        .opBtn {
          width: 16%;

          margin-left: 10px;
          margin-top: 5px;
        }
      }

      .leftTitle {
        background-color: #eee;
        height: 35px;
        line-height: 35px;
        text-align: center;
        p {
        }
      }
    }
    .contentBar {
      flex: 1;
      .option {
        width: 100%;
        border: 1px solid #eee;
        padding: 20px;
        border-radius: 6px;
        margin-bottom: 8px;
        cursor: pointer;
        // line-height: 50px;
        p {
          margin-left: 10px;
        }
      }
      .action {
        width: 100%;
        padding: 20px;
        border-radius: 6px;
        color: #409eff;
        margin-bottom: 8px;
        border: 1px solid #409eff;
        cursor: pointer;
        p {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
quId
